<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				height: 100%;
			}

			#wrap>.inner {
				text-align: center;

				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%, -50%, 0);

				/* 不换行 */
				white-space: nowrap;
			}

			/*
			transform 只对块级元素有效
			这个span要转为块级元素，不能用绝对定位，需要保留布局。
			*/
			#wrap>.inner>span {
				position: relative;
				/* animation: move 1s linear infinite alternate; */
			}

			@keyframes move {
				from {
					top: 0px;
				}

				to {
					top: -50px;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<span>一</span>
				<span>二</span>
				<span>三</span>
				<span>四</span>
				<span>五</span>
				<span>六</span>
				<span>七</span>
				<span>八</span>
				<span>九</span>
				<span>十</span>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var spanNodes = document.querySelectorAll("#wrap > .inner > span");
				var colors = ["red", "orange", "yellow", "green", "blue", "pink"]
				// debugger
				for (var i = 0; i < spanNodes.length; i++) {
					spanNodes[i].style.animation = "move 1s " + (i * 0.3) + "s linear infinite alternate";
					spanNodes[i].style.color = colors[i > spanNodes.length ? 0 : i];
				}
				// debugger
			};
		</script>
	</body>
</html>
